<template>
  <div>
    <el-dialog width="1100px"  :close-on-click-modal="false" title="编辑页面" :visible.sync="editVisible" class="tableDialog">
      <div v-loading="loading">
        <div style="margin-bottom: 15px;">页面名称: {{$dictUtils.getDictLabel("statisticsPage", row.pageHref, "")}}
           <el-button type="primary" style="padding: 0 10px;" @click="selectModel(row)">选择统计模型</el-button>
         </div>
        <el-table :data="detailTableData" style="width: 100%">
           <el-table-column
                 label="序号"
                 type="index"
                 width="50">
                 <template slot-scope="scope">
                   <span>{{
                     (detailPage.pageNo - 1) * detailPage.pageSize + scope.$index + 1
                   }}</span>
                 </template>
               </el-table-column>
           <el-table-column prop="title" label="模型名称" width="180">
           </el-table-column>
           <el-table-column  label="列宽" width="180">
             <template slot-scope="scope">
              <el-select clearable v-model="scope.row.span" @change="update($event,scope.row)">
                 <el-option v-for="item in spans"  :label="item.label"
                   :value="Number(item.value)"></el-option>
               </el-select>

             </template>
           </el-table-column>
           <el-table-column  label="高度" width="200">
             <template slot-scope="scope">
               <el-input-number @change="update($event,scope.row)" v-model="scope.row.height"   :min="1" :max="1500" label=""></el-input-number>

             </template>
           </el-table-column>
           <el-table-column  label="排序" width="200">
             <template slot-scope="scope">
               <el-input-number @change="update($event,scope.row)" v-model="scope.row.sort"   :min="1" :max="150" label=""></el-input-number>

             </template>
           </el-table-column>
           <el-table-column  label="样式">
             <template slot-scope="scope">
             <el-select clearable v-model="scope.row.colors" @change="update($event,scope.row)">
                <el-option v-for="item in $dictUtils.getDictList('color')"  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>

             </template>
           </el-table-column>

           <el-table-column  label="操作">
            <template slot-scope="scope">
               <el-link type="primary"  :underline="false" @click="delete1(scope.row)">删除</el-link>
             </template>
           </el-table-column>
         </el-table>
         <el-pagination
           background
           @size-change="sizeChangeHandleDetail"
           @current-change="handleCurrentChangeDetail"
           :current-page.sync="detailPage.pageNo"
           :page-sizes="[5, 10, 15, 20]"
           :page-size="detailPage.pageSize"
           layout="total, sizes,prev, pager, next"
           :total="detailPage.total"
         >
         </el-pagination>

      </div>


    </el-dialog>
    <el-dialog :close-on-click-modal="false" width="800px" title="选择统计模型" :visible.sync="modelVisible" class="tableDialog">
      <div v-loading="loading2">
        <el-form label-width="90px" ref="editForm" :model="editForm" :inline="true">
          <el-form-item label="关键字:">
            <el-input placeholder="输入标题搜索" v-model="editForm.title"> </el-input>
          </el-form-item>
          <el-form-item label="组件类型:">
            <el-select clearable v-model="editForm.type" placeholder="请选择组件类型">
              <el-option v-for="item in $dictUtils.getDictList('statisticsModelType')" v-if="item.value !=3 || item.value != 4 || item.value != 5" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-button
            type="primary"
            size="small"
            style="margin-right:5px;margin-left: 20px;"
            @click="getList"
          >查询
          </el-button
          >
          <el-button size="small" @click="reset">重置</el-button>
        </el-form>
        <el-table :data="modelTableData" style="width: 100%" :row-key="getRowKeys" @selection-change="selectModelData" ref="multipleTable">

          <el-table-column
                label="序号"
                type="index"
                width="50">
                <template slot-scope="scope">
                  <span>{{
                    (modelPage.pageNo - 1) * modelPage.pageSize + scope.$index + 1
                  }}</span>
                </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="180">
          </el-table-column>
          <el-table-column prop="type" label="组件类型" width="180">
            <template slot-scope="scope">
              {{$dictUtils.getDictLabel("statisticsModelType", scope.row.type, "")}}
            </template>

          </el-table-column>
          <el-table-column prop="version" label="版本号">
          </el-table-column>
          <el-table-column  type="selection" label="选择" :reserve-selection="true">
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="sizeChangeHandleModel"
          @current-change="handleCurrentChangeModel"
          :current-page.sync="modelPage.pageNo"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="modelPage.pageSize"
          layout="total, sizes,prev, pager, next"
          :total="modelPage.total"
        >
        </el-pagination>
        <span slot="footer" class="dialog-footer">
          <div class="footer-input">
            <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
            >确定</el-button
            >
          <el-button size="small" @click="close()">取消</el-button>

          </div>

        </span>
      </div>




    </el-dialog>

  </div>
</template>
<script>
  import {getList, del, updateState, getStatisticsSelectList} from '@/api/StatisticsModel.js'
import {
    getDetails, save, updateData, del1
  } from '@/api/StatisticsPageDetail.js'

export default {
    data () {
      return {
        loading: false,
        loading2: false,
        editVisible: false,
        modelVisible: false,
        editForm: {
          type: '',
          title: ''
        },
        isEdit: false,
        spans: [
          {
            value: '24',
            label: '100%'
          },
          {
            value: '18',
            label: '75%'
          },
          {
            value: '12',
            label: '50%'
          },
          {
            value: '8',
            label: '33.3%'
          },
          {
            value: '6',
            label: '25%'
          },
          {
            value: '4',
            label: '16.6%'
          }
        ],
        selectModelData1: [],
        modelPage: {
          pageSize: 5,
          pageNo: 1,
          total: 0
        },
        detailPage: {
          pageSize: 5,
          pageNo: 1,
          total: 0
        },
        detailTableData: [],
        row: {},
        modelTableData: [],
        tableData: []
      }
    },
    methods: {
		getRowKeys (row) {
		  return row.id
		},
      // 取消
      close () {
        this.modelVisible = false
        this.selectModelData1 = []
        this.$refs.multipleTable.clearSelection()
      },
      reset () {
        this.editForm.title = ''
        this.editForm.type = ''
      },

      // 更新高度
      updateHeight ($event, row) {
        console.log($event)
        console.log(row)
      },
      delete1 (row) {
        del1({ids: row.id}).then(res => {
          this.getDetails(this.row)
          this.$emit('getPageItems')
        })
      },
      // 更新
      update ($event, row) {
        console.log($event)
        var data = {
          id: row.id,
          span: row.span,
          height: row.height,
          colors: row.colors,
          sort: row.sort
        }
        updateData(data).then(res => {
          console.log('成功')
        })
        console.log(row)
      },
      // 模型list
      getList () {
        this.loading2 = true
        getList({
          pageSize: this.modelPage.pageSize,
          pageNo: this.modelPage.pageNo,
          title: this.editForm.title,
          type: this.editForm.type,
          state: 1
        }).then((res) => {
          if (res.data.code === '200') {
            this.modelTableData = res.data.result.list
            this.modelPage.total = res.data.result.count
            this.loading2 = false
          }
        })
      },
      // 选择模型
      selectModel (row) {
		  console.log(this.selectModelData1)
        this.modelVisible = true
        this.getList()
      },
      // 选择模型数据  打勾
      selectModelData (section) {
		  console.log(section)
        this.selectModelData1 = section
      },
      sizeChangeHandleModel (e) {
        this.modelPage.pageSize = e
      this.getList()
      },
      handleCurrentChangeModel (e) {
        this.modelPage.pageNo = e
        this.getList()
      },
      sizeChangeHandleDetail (e) {
        this.detailPage.pageSize = e
       this.getDetails(this.row)
      },
      handleCurrentChangeDetail (e) {
        this.detailPage.pageNo = e
      this.getDetails(this.row)
      },
      doSubmit () {
        var datas = []
        this.selectModelData1.forEach(item => {
          var data = {
            statisticsId: '',  // 统计模型ID
            pageHref: '',  // 租户页面使用路径
            statisticsPageId: '',  // 统计页面ID
            type: ''  // 类型
          }
          data.statisticsPageId = this.row.id
          data.pageHref = this.row.pageHref
          data.statisticsId = item.id
          data.type = item.type
          datas.push(data)
        })
        save(datas).then(res => {
          if (res.data.code == '200') {
            this.getDetails(this.row)
            this.$emit('getPageItems')
            this.close()
          }
        })
      },
      // 获取页面元素
      getDetails (row) {
        this.loading = true
      getDetails({
          pageSize: this.detailPage.pageSize,
          pageNo: this.detailPage.pageNo,
          statisticsPageId: row.id,
          orderBy: 'sort',
          orderByAORC: 'asc'

        }).then(res => {
          console.log(res.data)
          this.detailTableData = res.data.result.list
          this.detailPage.total = res.data.result.count
          console.log(this.detailTableData)
          this.loading = false
        })
      },
      /*  初始化  */
      init (method, row) {
        this.editVisible = true
        if (method == 'edit') {
          this.row = row
          this.getDetails(row)
        }
      }

    },
    mounted () {

    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .tableDialog.el-dialog__wrapper .el-dialog {
      min-height: 217px;
  }
</style>
